<template>
	<div id="SingerInfo_1">
		<div class="container">
			<el-form v-if="Object.keys(form).length > 0" ref="form" :model="form" :rules="rules" label-width="120px">
				<div class="wrapper">
					<div style="display: inline-block" class="wrapper-left">
						<el-form-item label="歌手ID：">
							<el-input class="w" v-model="form.externalId" :disabled="true"></el-input>
						</el-form-item>

						<el-form-item label="接入名称：">
							<el-input class="w" v-model="form.importName" :disabled="true"></el-input>
						</el-form-item>

						<el-form-item label="歌手名：" prop="name">
							<el-input :disabled="propsData.disabled" class="w" v-model="form.name" @input.native="singerSearch">
								<span slot="suffix" class="iconfont icon-qita" @click="handleOtherLang"></span>
							</el-input>
						</el-form-item>

						<el-form-item label="全拼：">
							<el-input :disabled="propsData.disabled" class="w" v-model="form.namePinyinFull"></el-input>
						</el-form-item>

						<el-form-item label="简拼：">
							<el-input :disabled="propsData.disabled" class="w" v-model="form.namePinyinShort"></el-input>
						</el-form-item>

						<!-- <el-form-item label="曾用名：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.nameUsedBefore"></el-input>
                        </el-form-item>

                        <el-form-item label="昵称：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.nickName"></el-input>
                        </el-form-item> -->

						<el-form-item label="相似艺人：">
							<el-input
								:readonly="true"
								:disabled="propsData.disabled"
								class="w"
								v-model="form.resembleActor.join(',')"
								@keyup.native.enter="handleResembleActor()"
							>
								<i
									slot="suffix"
									class="el-input__icon el-icon-search"
									:style="{ 'font-size': '18px', cursor: 'pointer' }"
									@click="handleResembleActor()"
								></i>
							</el-input>
							<!-- <el-input :disabled="propsData.disabled" class="w" v-model="form.resembleActor.join('/')"></el-input> -->
						</el-form-item>

						<el-form-item label="外文名：">
							<el-input :disabled="propsData.disabled" class="w" v-model="form.foreignName"></el-input>
						</el-form-item>

						<el-form-item label="别名：">
							<el-input :disabled="propsData.disabled" class="w" v-model="form.aliasName"></el-input>
						</el-form-item>

						<el-form-item label="是否知名歌手：">
							<el-select
								:disabled="propsData.disabled"
								:clearable="true"
								v-model="form.famousFlag"
								class="handle-select mr10 w"
							>
								<el-option key="0" label="否" :value="false"></el-option>
								<el-option key="1" label="是" :value="true"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="热度：">
							<el-select :disabled="propsData.disabled" :clearable="true" v-model="form.grade" class="handle-select mr10 w">
								<el-option key="0" label="否" :value="0"></el-option>
								<el-option key="1" label="是" :value="1"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="状态：" prop="status">
							<el-select
								:disabled="propsData.disabled"
								:clearable="true"
								v-model="form.status"
								placeholder="请选择状态"
								class="handle-select mr10 w"
							>
								<el-option key="0" label="下线" :value="0"></el-option>
								<el-option key="1" label="上线" :value="1"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="黑名单：">
							<el-select
								:disabled="propsData.disabled"
								:clearable="true"
								v-model="form.blackFlag"
								class="handle-select mr10 w"
							>
								<el-option key="0" label="非黑名单" :value="false"></el-option>
								<el-option key="1" label="黑名单" :value="true"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="歌手类型：" prop="type">
							<el-select
								:disabled="propsData.disabled"
								:clearable="true"
								v-model="form.type"
								placeholder="请选择歌手类型"
								class="handle-select mr10 w"
							>
								<el-option key="0" label="华语男" :value="101"></el-option>
								<el-option key="1" label="华语女" :value="102"></el-option>
								<el-option key="2" label="华语组合" :value="103"></el-option>
								<el-option key="3" label="韩语男" :value="104"></el-option>
								<el-option key="4" label="韩语女" :value="105"></el-option>
								<el-option key="5" label="韩语组合" :value="106"></el-option>
								<el-option key="6" label="日语男" :value="107"></el-option>
								<el-option key="7" label="日语女" :value="108"></el-option>
								<el-option key="8" label="日语组合" :value="109"></el-option>
								<el-option key="9" label="欧美男" :value="110"></el-option>
								<el-option key="10" label="欧美女" :value="111"></el-option>
								<el-option key="11" label="欧美组合" :value="112"></el-option>
								<el-option key="12" label="乐团" :value="113"></el-option>
								<el-option key="13" label="演奏家" :value="114"></el-option>
								<el-option key="14" label="作曲家" :value="115"></el-option>
								<el-option key="15" label="指挥家" :value="116"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="歌手角色：" prop="role">
							<el-select
								:disabled="propsData.disabled"
								:clearable="true"
								v-model="form.role"
								placeholder="请选择歌手角色"
								class="handle-select mr10 w"
							>
								<el-option key="0" label="演唱" value="1"></el-option>
								<el-option key="1" label="演奏" value="2"></el-option>
								<el-option key="2" label="作词" value="4"></el-option>
								<el-option key="3" label="作曲" value="8"></el-option>
								<el-option key="4" label="艺术表演" value="16"></el-option>
								<el-option key="5" label="指挥" value="32"></el-option>
								<el-option key="6" label="编曲" value="64"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="绑定id:">
							<el-input
								:readonly="true"
								:disabled="propsData.disabled || !form.bindFlag"
								class="w"
								v-model="form.bandId"
								@keyup.native.enter="handleBindId(form.bindFlag)"
							>
								<i
									slot="suffix"
									class="el-input__icon el-icon-search"
									:style="{ 'font-size': '18px', cursor: 'pointer' }"
									@click="handleBindId(form.bindFlag)"
								></i>
							</el-input>
						</el-form-item>

						<el-form-item label="擅长的乐器：">
							<el-input :disabled="propsData.disabled" class="w" v-model="form.musicalInstrument"></el-input>
						</el-form-item>

						<el-form-item label="兴趣爱好：">
							<el-input :disabled="propsData.disabled" class="w" v-model="form.interest"></el-input>
						</el-form-item>

						<el-form-item label="敏感信息：">
							<el-input :disabled="propsData.disabled" class="w"></el-input>
						</el-form-item>

						<el-form-item label="职业：">
							<el-select
								:disabled="propsData.disabled"
								class="w"
								v-model="form.profession"
								multiple
								placeholder="请选择"
								clearable
							>
								<el-option v-for="(item, index) in professions" :key="index" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="从艺历程:">
							<el-input
								:disabled="propsData.disabled"
								type="textarea"
								class="w"
								placeholder="请输入内容"
								v-model="form.artHistory"
								maxlength="10000"
								show-word-limit
								rows="5"
							>
							</el-input>
						</el-form-item>

						<el-form-item label="代表作:">
							<el-input
								:disabled="propsData.disabled"
								type="textarea"
								class="w"
								placeholder="请输入内容"
								v-model="form.representative"
								maxlength="10000"
								show-word-limit
								rows="5"
							>
							</el-input>
						</el-form-item>

						<el-form-item label="主要成就:">
							<el-input
								:disabled="propsData.disabled"
								type="textarea"
								class="w"
								placeholder="请输入内容"
								v-model="form.achievement"
								maxlength="10000"
								show-word-limit
								rows="5"
							>
							</el-input>
						</el-form-item>
						<el-form-item label="荣誉记录:">
							<el-input
								:disabled="propsData.disabled"
								type="textarea"
								class="w"
								placeholder="请输入内容"
								v-model="form.honour"
								maxlength="10000"
								show-word-limit
								rows="5"
							>
							</el-input>
						</el-form-item>
					</div>
					<div style="display: inline-block" class="wrapper-right">
						<el-form-item prop="tblActorPictures">
							<div class="upload-file">
								<div class="show-img" v-if="show">
									<img ref="img" :src="avatar" alt="" />
									<span class="after" @click="removeFile(0)"
										><img src="@/assets/img/ico_feedback_delete@2x.png" alt=""
									/></span>
								</div>
								<!-- 文件上传按钮 -->
								<a href="javascript:void(0)" class="btn" v-if="!show">
									<span class="add-btn">
										<img src="@/assets/img/ico_feedback_add@2x.png" alt="" />
									</span>
									<input
										:disabled="propsData.disabled"
										type="file"
										accept="image/*"
										capture="camera"
										id="file"
										name="file"
										@change="upload"
									/>
								</a>
							</div>

							<div class="upload-btn">
								<div class="img-size">
									<p class="tips-title">上传图片至少：240*240（文件不大于1M）</p>
									<p class="size">
										<label for="240">
											<input type="radio" name="size" id="240" />
											240
										</label>
										<label for="320">
											<input type="radio" name="size" id="320" />
											320
										</label>
										<label for="600">
											<input type="radio" name="size" id="600" />
											600
										</label>
										<label for="1000">
											<input type="radio" name="size" id="1000" />
											1000
										</label>
									</p>
								</div>
								<a v-if="propsData.btn" href="javascript:void(0)" class="btn">
									上传图片
									<input type="file" id="file" accept="image/*" name="file" @change="upload" />
								</a>
							</div>
						</el-form-item>

						<el-form-item label="性别：" prop="gender">
							<el-select
								:disabled="propsData.disabled"
								:clearable="true"
								v-model="form.gender"
								placeholder="请选择性别"
								class="handle-select mr10 w"
							>
								<el-option key="0" label="女" :value="0"></el-option>
								<el-option key="1" label="男" :value="1"></el-option>
								<el-option key="2" label="未知" :value="2"></el-option>
								<el-option key="3" label="组合" :value="3"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="毕业学校：">
							<el-input :disabled="propsData.disabled" class="w" clearable v-model="form.college"></el-input>
						</el-form-item>

						<el-form-item label="最高学历：">
							<el-input :disabled="propsData.disabled" class="w" clearable v-model="form.education"></el-input>
						</el-form-item>

						<el-form-item label="出道日期：">
							<div class="block w">
								<el-date-picker
									:disabled="propsData.disabled"
									:clearable="true"
									class="w"
									v-model="form.debutDate"
									type="date"
									placeholder="选择日期"
								>
								</el-date-picker>
							</div>
						</el-form-item>

						<el-form-item label="区域：" prop="area">
							<el-select
								:disabled="propsData.disabled"
								:clearable="true"
								v-model="form.area"
								placeholder="请选择区域"
								class="handle-select mr10 w"
							>
								<el-option key="1" label="华语" value="1"></el-option>
								<el-option key="2" label="欧美" value="2"></el-option>
								<el-option key="3" label="日韩" value="3"></el-option>
								<el-option key="4" label="其他" value="4"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="国籍：">
							<el-select
								:disabled="propsData.disabled"
								placeholder="请选择国籍"
								:clearable="true"
								filterable
								class="handle-select mr10 w"
								v-model="form.country"
							>
								<el-option-group v-for="group in countrys" :key="group.label" :label="group.label">
									<el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
										<span style="float: left">{{ item.label }}</span>
										<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
									</el-option>
								</el-option-group>
							</el-select>
						</el-form-item>

						<el-form-item label="出生日期：">
							<div class="block w">
								<el-date-picker
									:disabled="propsData.disabled"
									:clearable="true"
									class="w"
									v-model="form.birthday"
									type="date"
									placeholder="选择日期"
								>
								</el-date-picker>
							</div>
						</el-form-item>

						<el-form-item label="出生地：">
							<el-input :disabled="propsData.disabled" class="w" clearable v-model="form.birthPlace"></el-input>
						</el-form-item>

						<el-form-item label="民族：">
							<el-select
								:disabled="propsData.disabled"
								:clearable="true"
								v-model="form.nation"
								placeholder="请选择民族"
								class="handle-select mr10 w"
							>
								<el-option v-for="(item, index) in nations" :key="index" :label="item" :value="index"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="身高(单位：cm)：">
							<el-input :disabled="propsData.disabled" class="w" clearable v-model="form.height"></el-input>
						</el-form-item>

						<el-form-item label="体重(单位：KG)：">
							<el-input :disabled="propsData.disabled" class="w" clearable v-model="form.weight"></el-input>
						</el-form-item>

						<el-form-item label="血型：">
							<el-select
								:disabled="propsData.disabled"
								:clearable="true"
								v-model="form.bloodType"
								placeholder="请选择血型"
								class="handle-select mr10 w"
							>
								<el-option key="0" label="A型" value="0"></el-option>
								<el-option key="1" label="B型" value="1"></el-option>
								<el-option key="2" label="O型" value="2"></el-option>
								<el-option key="3" label="AB型" value="3"></el-option>
								<el-option key="4" label="Rh阳性" value="4"></el-option>
								<el-option key="5" label="Rh阴性" value="5"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="星座：">
							<el-select
								:disabled="propsData.disabled"
								:clearable="true"
								v-model="form.constellation"
								placeholder="请选择星座"
								class="handle-select mr10 w"
							>
								<el-option key="1" label="水瓶座" value="1"></el-option>
								<el-option key="2" label="双鱼座" value="2"></el-option>
								<el-option key="3" label="白羊座" value="3"></el-option>
								<el-option key="4" label="金牛座" value="4"></el-option>
								<el-option key="5" label="双子座" value="5"></el-option>
								<el-option key="6" label="巨蟹座" value="6"></el-option>
								<el-option key="7" label="狮子座" value="7"></el-option>
								<el-option key="8" label="处女座" value="8"></el-option>
								<el-option key="9" label="天秤座" value="9"></el-option>
								<el-option key="10" label="天蝎座" value="10"></el-option>
								<el-option key="11" label="射手座" value="11"></el-option>
								<el-option key="12" label="摩羯座" value="12"></el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="简介:">
							<el-input
								:disabled="propsData.disabled"
								type="textarea"
								class="w"
								placeholder="请输入内容"
								v-model="form.introduction"
								maxlength="10000"
								show-word-limit
								rows="5"
								@input.native="introSearch"
							>
							</el-input>
						</el-form-item>
					</div>
				</div>

				<el-form-item style="text-align: right; margin-right: 5%">
					<el-button v-if="propsData.btn" type="reset" @click="handleCancel">取消</el-button>
					<el-button
						v-if="propsData.btn"
						type="primary"
						@click="handleSave"
						:disabled="
							legals.includes(true) ||
							checkRequire({
								name: form.name,
								status: form.status,
								type: form.type,
								role: form.role,
								gender: form.gender,
								area: form.area
							})
						"
						>保存</el-button
					>
				</el-form-item>
			</el-form>
		</div>

		<!-- 其他国家语言弹出框 -->
		<el-dialog :close-on-click-modal="false" title="其他名称" :visible.sync="otherLangVisible" width="50%">
			<div class="limiter" v-if="form.tblActorLangs && form.tblActorLangs.length > 0">
				<div class="container-table">
					<div class="wrap-table">
						<div class="data-table ver1 m-b-110">
							<div class="table-head">
								<table>
									<thead>
										<tr class="row head">
											<th class="cell column1" :style="{ width: '40%' }">地区</th>
											<th class="cell column2" :style="{ width: 'auto' }">名称</th>
											<!-- <th class="cell column3">匹配类型</th> -->
										</tr>
									</thead>
								</table>
							</div>

							<div class="table-body">
								<table>
									<tbody>
										<tr v-for="(item, index) in form.tblActorLangs" :key="index" class="row body">
											<td class="cell column1" :style="{ width: '40%' }">{{ getCountryName(item.language) }}</td>
											<td class="cell column2" :style="{ width: 'auto' }">{{ item.importName }}</td>
											<!-- <td class="cell column3">{{ item.relaType }}</td> -->
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>

		<!-- 绑定Id弹出框 -->
		<el-dialog :close-on-click-modal="false" title="绑定Id" :visible.sync="bindIdVisible" width="50%">
			<div class="container">
				<div class="handle-box">
					<el-input
						@keyup.native.enter="handleSearchBindId"
						v-model="query_3.ids"
						placeholder="歌手ID"
						class="mr10"
						style="width: 120px"
						clearable
					></el-input>

					<el-button type="primary" :disabled="disabled" @click="handleSearchBindId">搜索</el-button>
				</div>
				<el-table
					v-if="tableData_3.length > 0"
					:data="tableData_3"
					border
					ref="multipleTable"
					header-cell-class-name="table-header"
				>
					<el-table-column label="ID" align="center" :show-overflow-tooltip="true">
						<template slot-scope="scope">{{ scope.row.id }}</template>
					</el-table-column>

					<!-- <el-table-column label="歌曲名" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.importName }}</template>
                    </el-table-column> -->

					<el-table-column label="歌手名" align="center" :show-overflow-tooltip="true">
						<template slot-scope="scope">{{ scope.row.importName }}</template>
					</el-table-column>

					<el-table-column label="操作" width="180" align="center">
						<template slot-scope="scope">
							<el-button
								type="primary"
								:disabled="scope.row.relaResultForms === ''"
								@click="handleBindIdAdd(scope.$index, scope.row)"
								>添加</el-button
							>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>

		<!-- 相似艺人弹出框 -->
		<el-dialog :close-on-click-modal="false" title="相似艺人" :visible.sync="resembleActorVisible" width="50%">
			<div class="container">
				<div class="handle-box">
					<el-input
						@keyup.native.enter="handleSearchResembleActor"
						v-model="query_4.ids"
						placeholder="歌手ID"
						class="mr10"
						style="width: 120px"
						clearable
					></el-input>

					<el-button type="primary" :disabled="disabled" @click="handleSearchResembleActor">搜索</el-button>
				</div>
				<el-table
					v-if="tableData_4.length > 0"
					:data="tableData_4"
					border
					ref="multipleTable"
					header-cell-class-name="table-header"
				>
					<el-table-column label="ID" align="center" :show-overflow-tooltip="true">
						<template slot-scope="scope">{{ scope.row.id }}</template>
					</el-table-column>

					<el-table-column label="歌手名" align="center" :show-overflow-tooltip="true">
						<template slot-scope="scope">{{ scope.row.importName }}</template>
					</el-table-column>

					<el-table-column label="操作" width="180" align="center">
						<template slot-scope="scope">
							<el-button
								type="primary"
								:disabled="scope.row.relaResultForms === ''"
								@click="handleResembleActorAdd(scope.$index, scope.row)"
								>添加</el-button
							>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import { countrys } from '@/components/common/';
	import { languages } from '@/components/common/';
	import { nations } from '@/components/common/';
	import { mapGetters, mapMutations, mapActions } from 'vuex';
	import { debounce, throttle } from '@/utils/utils.js';
	import NProgress from 'nprogress';
	import axios from 'axios';
	export default {
		name: 'SingerInfo_1',
		props: {
			propsData: {
				type: Object,
				default: function () {
					return {
						btn: true,
						disabled: false
					};
				}
			}
		},
		data() {
			return {
				query_3: {
					ids: '',
					pageIndex: 1,
					pageSize: 10
				},
				tableData_3: [],

				query_4: {
					ids: '',
					pageIndex: 1,
					pageSize: 10
				},
				tableData_4: [],
				disabled: false,
				bindIdVisible: false,
				resembleActorVisible: false,
				otherLangVisible: false,
				legals: [false, false, false],
				countrys,
				languages,
				nations,
				baseUrl: process.env.VUE_APP_SRC1,
				show: true,
				avatar: null,
				rules: {
					name: [{ required: true, message: '请填写歌手名称', trigger: 'blur' }],
					type: [{ required: true, message: '请选择歌手类型', trigger: 'change' }],
					role: [{ required: true, message: '请选择歌手角色', trigger: 'change' }],
					gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
					area: [{ required: true, message: '请选择区域', trigger: 'change' }],
					status: [{ required: true, message: '请选择状态', trigger: 'change' }],
					tblActorPictures: [{ required: true, message: '请上传歌手图片', trigger: 'change' }]
				},
				professions: [
					{ value: '1', label: '歌手' },
					{ value: '2', label: '演员' },
					{ value: '3', label: '主持人' },
					{ value: '4', label: '作曲家' },
					{ value: '5', label: '制作人' },
					{ value: '6', label: '配音演员' },
					{ value: '7', label: '作家' },
					{ value: '8', label: '导演' },
					{ value: '9', label: 'DJ' },
					{ value: '10', label: '歌唱家' },
					{ value: '11', label: '指挥家' },
					{ value: '12', label: '模特' },
					{ value: '13', label: '乐队主唱' },
					{ value: '14', label: '唱作人' },
					{ value: '15', label: '曲作者' },
					{ value: '16', label: '词作者' },
					{ value: '17', label: '作词家' },
					{ value: '18', label: '乐队吉他手' },
					{ value: '19', label: '乐队贝斯手' },
					{ value: '20', label: '乐队鼓手' },
					{ value: '21', label: '乐队键盘手' },
					{ value: '22', label: '演奏家' },
					{ value: '23', label: '编剧' },
					{ value: '24', label: '配乐师' },
					{ value: '25', label: '编曲' },
					{ value: '26', label: '录音师' },
					{ value: '27', label: '制片人' },
					{ value: '28', label: '独立音乐人' },
					{ value: '29', label: '原创音乐人' },
					{ value: '30', label: '乐评人' },
					{ value: '31', label: 'FUNS歌手' },
					{ value: '32', label: '视频彩铃首席体验官' }
				],

				// form: {},
				coverImage: null
			};
		},
		watch: {
			$route: {
				deep: true,
				immediate: true,
				handler(a, b) {
					console.log(a, b);
					if (a.name === 'SingerInfo') {
						if (this.$route.query.id) {
							if (Object.keys(this.form).length === 0) {
								// 获取歌手信息
								this.getDataById(this.$route.query.id);
								// 获取歌曲信息和专辑信息id
								this.ids(this.$route.query.id);
							}
						}
					}
				}
			}
		},
		destroyed() {
			if (!this.tagsList.some((item) => item.name === 'SingerInfo')) {
				localStorage.removeItem('id_singer');
				localStorage.removeItem('indexFlag_singer');
				this.$storage.remove('operate');
			} else {
				//  什么都不做
			}
		},
		computed: {
			...mapGetters({
				tagsList: 'tagsList',
				form: 'songInfoForm'
			})
		},
		methods: {
			// 相似艺人
			handleResembleActor() {
				this.resembleActorVisible = true;
			},
			handleSearchResembleActor() {
				this.getResembleActor();
			},
			async getResembleActor() {
				try {
					let _this = this;
					this.cancelQuest(); //在请求发出前取消上一次未完成的请求；
					NProgress.start();
					this.disabled = true;
					let url = '/artist/list';
					let { data: res } = await this.$http[0].get(url, {
						cancelToken: new axios.CancelToken(function executor(c) {
							_this.source = c;
						}),
						params: this.$removeField({
							page: this.query_4.pageIndex,
							size: this.query_4.pageSize,
							ids: this.query_4.ids.trim()
						})
					});
					console.log('歌手管理', res);
					if (res.code != '0000') {
						throw new Error(res.message);
					}
					// 中间处理
					if (res.data.content && res.data.content.length > 0) {
						this.tableData_4 = res.data.content;
					} else {
						this.tableData_4 = [];
					}
					NProgress.done();
					this.disabled = false;
				} catch (err) {
					console.dir(err);
					NProgress.done();
					this.disabled = false;
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},
			handleResembleActorAdd(index, row) {
				// this.$confirm('确认绑定吗?', '提示', {
				//     type: 'warning'
				// })
				//     .then(() => {
				//         // this.$handleUnlock.call(this, this.save, '/song/unlock', this.form.id);
				//         this.resembleActor(row);
				//     })
				//     .catch(() => {});
				this.SET_QUKUARTIST_FORM({ ...this.form, resembleActor: [...this.form.resembleActor, row.id] });
			},

			// =====================================================================================
			cancelQuest() {
				if (typeof this.source === 'function') {
					this.source('终止请求');
				}
			},
			// 绑定Id
			async getBindIdData() {
				try {
					const _this = this;
					this.cancelQuest();
					NProgress.start();
					this.disabled = true;
					const url = '/artist/list';
					const { data: res } = await this.$http[0].get(url, {
						cancelToken: new axios.CancelToken(function executor(c) {
							_this.source = c;
						}),
						params: this.$removeField({
							page: this.query_3.pageIndex,
							size: this.query_3.pageSize,
							ids: this.query_3.ids.trim()
						})
					});

					if (res.code != '0000') {
						throw new Error(res.message);
					}
					if (res.data.content && res.data.content.length > 0) {
						this.tableData_3 = res.data.content;
					} else {
						this.tableData_3 = [];
					}

					NProgress.done();
					this.disabled = false;
				} catch (err) {
					this.tableData_3 = [];

					console.dir(err);
					NProgress.done();
					this.disabled = false;
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},
			handleSearchBindId() {
				this.getBindIdData();
			},
			handleBindIdAdd(index, row) {
				this.$confirm('确认绑定吗?', '提示', {
					type: 'warning'
				})
					.then(() => {
						// this.$handleUnlock.call(this, this.save, '/song/unlock', this.form.id);
						this.bind(row);
					})
					.catch(() => {});
			},
			async bind(row) {
				try {
					let url = '/artist/bind';
					let { data: res } = await this.$http[0].get(url, {
						params: {
							actorId: this.$route.query.id,
							bindId: row.id
						}
					});
					console.log(res);
					if (res.code != '0000') {
						throw new Error(res.message);
					}
					// this.form.bandId = row.id;
					this.SET_QUKUARTIST_FORM({ ...this.form, bandId: row.id });
					this.$message.success({
						message: res.message,
						duration: 1500
					});
					this.bindIdVisible = false;
				} catch (err) {
					console.dir(err);
				}
			},
			handleBindId(bindFlag) {
				if (bindFlag === false) {
					return;
				}
				this.bindIdVisible = true;
			},
			getCountryName(lang) {
				let languages = this.languages;
				for (let i = 0, len = languages.length; i < len; i++) {
					if (lang === languages[i].value) {
						return languages[i].label;
					}
				}
			},
			handleOtherLang() {
				this.otherLangVisible = true;
			},
			introSearch: debounce(function ({ target: { value } }) {
				if (!value) {
					// 不输入关键词时恢复为原来的文本
					// this.form.name = '';
					return;
				}
				setTimeout(() => {
					this.$getTextTest.call(this, value, 1);
				}, 500);
			}, 1000),
			singerSearch: debounce(function ({ target: { value } }) {
				if (!value) {
					// 不输入关键词时恢复为原来的文本
					// this.form.name = '';
					return;
				}
				setTimeout(() => {
					this.$getTextTest.call(this, value, 0);
				}, 500);
			}, 1000),
			checkRequire(obj) {
				return this.$isEmpty(obj);
			},
			...mapActions(['setAlbumInfoData', 'setSongInfoData']),
			...mapMutations({
				SET_SINGERINFO: 'SET_SINGERINFO',
				SET_SONGALBUMIDS: 'SET_SONGALBUMIDS',
				SET_TAGSLIST: 'SET_TAGSLIST',
				SET_QUKUARTIST_DATA: 'SET_QUKUARTIST_DATA',
				SET_QUKUARTIST_FORM: 'SET_QUKUARTIST_FORM'
			}),

			ids(sid) {
				Promise.all([
					this.wake('/song/list', {
						// ids: result[0].songIds.join(',')
						actorId: this.$route.query.id
					}),
					this.wake('/album/list', {
						// ids: result[0].albumIds.join(',')
						actorId: this.$route.query.id
					})
				])
					.then((ret) => {
						console.log(ret);
						ret = Array.from(ret);
						// 中间处理
						for (var i = 0; i < ret.length; i++) {
							if (ret[i].list && ret[i].list.length && ret[i].list.length > 0) {
								for (var item of ret[i].list) {
									if (item.actors && item.actors.length && item.actors.length > 0) {
										item.actors.name = '';
										for (var val of item.actors) {
											item.actors.name += val.name + '/';
										}
										item.actors.name = item.actors.name.slice(0, -1);
									} else {
										item.actors = [];
										item.actors.name = '';
									}
									item.tblAlbum = item.tblAlbum ? item.tblAlbum : {};
									item.tblCppartner = item.tblCppartner ? item.tblCppartner : {};
									item.releaseDate = this.$dateFormat(item.releaseDate, '', '-');
									item.updateTime = this.$dateFormat(item.updateTime, '', '-');
								}
							} else {
								ret[i].list = [];
							}
						}
						// 歌曲信息
						if (ret[0].content && ret[0].content.length && ret[0].content.length > 0) {
							for (var i = 0; i < ret[0].content.length; i++) {
								if (ret[0].content[i].actors && ret[0].content[i].actors.length && ret[0].content[i].actors.length > 0) {
									ret[0].content[i].actors.name = '';
									ret[0].content[i].actors.map((item) => {
										ret[0].content[i].actors.name += item.name + '/';
										ret[0].content[i].actors.name = ret[0].content[i].actors.name.slice(0, -1);
									});
								} else {
									ret[0].content[i].actors = [];
									ret[0].content[i].actors.name = '';
								}
							}

							console.log(ret[0]);
							this.setSongInfoData(ret[0]);
						}

						// 专辑信息
						if (ret[1].content && ret[1].content.length > 0) {
							if (ret[1].content[0].actors && ret[1].content[0].actors.length > 0) {
								ret[1].content[0].actors.name = '';
								ret[1].content[0].actors.map((item) => {
									ret[1].content[0].actors.name += item.name + '/';
									ret[1].content[0].actors.name = ret[1].content[0].actors.name.slice(0, -1);
								});
							} else {
								ret[1].content[0].actors = [];
								ret[1].content[0].actors.name = '';
							}

							this.setAlbumInfoData(ret[1]);
						}
					})
					.catch((error) => {
						console.dir(error);
					});
			},
			wake(url, params) {
				return new Promise((resolve, reject) => {
					this.geSongAlbumID(resolve, url, params);
				});
			},
			async geSongAlbumID(resolve, url, params) {
				try {
					// let url = '/artist/getIdByaid';
					let { data: res } = await this.$http[0].get(url, {
						// params: {
						//     actorId: sid
						// }
						params
					});
					// console.log('ids', res);
					resolve(res.data);
					// return res.data;
				} catch (err) {
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},
			// 获取歌手信息
			async getDataById(sid) {
				try {
					NProgress.start();
					let url = '/artist/detail';
					let { data: res } = await this.$http[0].get(url, {
						params: this.$removeField({
							id: sid,
							indexFlag: localStorage.getItem('indexFlag_singer') ? localStorage.getItem('indexFlag_singer') : null
						})
					});
					if (res.code != '0000') {
						throw new Error(res.message);
					}
					console.log('歌手信息', res.data.profession);
					// 取值、设置默认值
					let requiredFields = {
						id: '',
						name: '',
						namePinyinFull: '',
						namePinyinShort: '',
						// nameUsedBefore: '',
						// nickName: '',
						resembleActor: [],
						foreignName: '',
						aliasName: '',
						famousFlag: '',
						grade: '',
						status: '',
						blackFlag: '',
						type: '',
						role: '',
						externalId: '',
						musicalInstrument: '',
						interest: '',
						profession: [],
						gender: '',
						college: '',
						education: '',
						debutDate: '',
						area: '',
						country: '',
						birthday: '',
						birthPlace: '',
						nation: '',
						height: '',
						weight: '',
						bloodType: '',
						constellation: '',
						artHistory: '',
						representative: '',
						achievement: '',
						honour: '',
						introduction: '',
						tblActorPictures: [{ filePath: '' }],
						importName: '',
						tblActorLangs: [],
						bindFlag: '',
						bandId: ''
					};
					// console.log(Object.keys(requiredFields));
					var ret = this.$chooseFields(res.data, Object.keys(requiredFields), {}, requiredFields);
					// console.log(res.data.profession);
					ret.profession = res.data.profession ? res.data.profession.split(',') : [];
					// console.log(res.data.profession.split(','));
					// console.log(ret);
					// 中间处理
					ret.birthday = ret.birthday ? new Date(parseInt(ret.birthday)) : '';
					console.log(ret.tblActorPictures[0].filePath !== '');
					if (ret.tblActorPictures[0].filePath !== '') {
						this.avatar = `${this.baseUrl}/api/stream/audio?path=${ret.tblActorPictures[0].filePath}`;
						this.show = true;
					} else {
						this.avatar = null;
						this.show = false;
					}
					// 赋值
					// this.form = ret;
					this.SET_SINGERINFO(ret);
					this.$setActiveTag.call(this, ret.name);
					this.SET_QUKUARTIST_FORM(ret);

					NProgress.done();
				} catch (err) {
					console.dir(err);
					NProgress.done();
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},

			handleSave() {
				this.$confirm('确定要提交吗？', '提示', {
					type: 'warning'
				})
					.then(() => {
						// this.$handleUnlock.call(this, this.save, '/artist/unlock', this.form.id);
						this.save();
					})
					.catch(() => {});
			},
			async save() {
				try {
					// let url = '/artist/update';
					let url = '/artist/actorcache';
					var params = this.$removeField({
						id: this.form.id,
						introduction: this.form.introduction,
						area: this.form.area,
						type: this.$getNumber(this.form.type),
						bloodType: this.$getNumber(this.form.bloodType),
						constellation: this.$getString(this.form.constellation),
						country: this.$getString(this.form.country),
						// profession: this.form.profession.join(','),
						profession: this.form.profession,
						achievement: this.$getString(this.form.achievement),
						aliasName: this.$getString(this.form.aliasName),
						artHistory: this.$getString(this.form.artHistory),
						birthday: this.$dateFormat(this.$standardDateToTimstamp(this.form.birthday), '', '-'),
						blackFlag: this.form.blackFlag,
						college: this.$getString(this.form.college),
						debutDate: this.$dateFormat(this.form.debutDate, '', '-'),
						education: this.$getString(this.form.education),
						famousFlag: this.form.famousFlag,
						foreignName: this.$getString(this.form.foreignName),
						gender: this.$getNumber(this.form.gender),
						height: this.$getNumber(this.form.height),
						honour: this.$getString(this.form.honour),
						interest: this.$getString(this.form.interest),
						musicalInstrument: this.$getString(this.form.musicalInstrument),
						nation: this.$getString(this.form.nation),
						representative: this.$getString(this.form.representative),
						role: this.$getNumber(this.form.role),
						status: this.$getNumber(this.form.status),
						weight: this.$getNumber(this.form.weight),
						name: this.$getString(this.form.name),
						namePinyinFull: this.$getString(this.form.namePinyinFull),
						namePinyinShort: this.$getString(this.form.namePinyinShort),
						// nameUsedBefore: this.form.nameUsedBefore,
						// nickName: this.form.nickName,
						resembleActor: this.form.resembleActor,
						coverImage: this.coverImage
					});
					var formdata = new FormData();
					for (var key in params) {
						formdata.append(key, params[key]);
					}
					let { data: res } = await this.$http[0].post(url, formdata, {
						headers: {
							name: localStorage.getItem('ms_username'),
							'Content-Type': 'multipart/form-data'
						}
					});
					if (res.code != '0000') {
						throw new Error(res.message);
					}

					this.$message.success({
						message: res.message,
						duration: 1500
					});

					this.$closeActiveTag.call(this);
					this.$router.replace({
						path: '/singer_/admin'
					});
					this.SET_QUKUARTIST_DATA([]);
				} catch (err) {
					this.$message.error({
						message: err.message,
						duration: 1500
					});
				}
			},

			cancel() {
				this.$closeActiveTag.call(this);
				this.$router.replace({
					path: '/singer_/admin'
				});
			},
			handleCancel() {
				this.$handleUnlock.call(this, this.cancel, '/artist/unlock', this.form.id);
			},
			removeFile(index = 0) {
				// if (this.form.tblActorPictures[0]) {
				//     this.form.tblActorPictures[0].filePath = '';
				// }

				this.avatar = null;
				this.show = false;
				this.coverImage = null;
			},
			upload(e) {
				var event = e || window.event;
				var target = event.target || e.srcElement;
				var file = target.files[0];
				let isLt1M = file.size / 1024 / 1024 <= 1;
				if (!isLt1M) {
					return this.$message.error('上传图片大小不能超过1MB!');
				}
				this.show = true;
				let promise = this.$getImgTest_plus.call(this, e, target, file, 2, () => {}, 'avatar');
				promise.then(() => {
					this.$getImgNaturalDimensions(this.$refs['img'], (dimensions) => {
						console.log(dimensions);
						if (dimensions.w < 800 || dimensions.h < 800) {
							this.$message.warning({
								message: '图片尺寸不能小于 800 * 800',
								duration: 1500
							});
							this.removeFile();
						}
					});
				});

				// this.uploadFile(e);
			}
			// async uploadFile(e, target, file) {
			//     try {
			//         let isLt5M = file.size / 1024 / 1024 <= 5;
			//         if (!isLt5M) {
			//             return this.$message.error('上传图片大小不能超过5MB!');
			//         }

			//         var formdata = new FormData();
			//         formdata.append('coverImage', file);
			//         formdata.append('id', this.$route.query.id);
			//         let url = '/artist/uploadImg';

			//         let { data: res } = await this.$http[0].post(url, formdata, {
			//             headers: {
			//                 'Content-Type': 'multipart/form-data',
			//                 name: localStorage.getItem('ms_username')
			//             }
			//         });
			//         console.log('响应数据', res);
			//         target.value = null;
			//         if (res.code != '0000') {
			//             this.$message.error({
			//                 message: res.message,
			//                 duration: 1500
			//             });
			//         } else {
			//             this.$message.success({
			//                 message: res.message,
			//                 duration: 1500
			//             });
			//             this.getDataById(this.$route.query.id);
			//         }
			//     } catch (err) {
			//         console.dir(err);
			//         target.value = null;
			//         this.$message.error({
			//             message: err.message,
			//             duration: 1500
			//         });
			//     }
			// }
		}
	};
</script>

<style lang="scss">
	#SingerInfo_1 {
		.icon-qita {
			font-size: 18px;
			cursor: pointer;
		}
		.limiter * {
			margin: 0px;
			padding: 0px;
			box-sizing: border-box;
		}
		/*==================================================================
							[ 表格宽度 ]*/
		.limiter {
			::-webkit-scrollbar {
				display: none;
			}

			// 　　width: 80%;
			margin: 10px auto 0;
			/*---------------------------------------------*/

			.container-table {
				width: 100%;
				background: #fff;
				// padding: 0px 30px;
			}

			.wrap-table {
				width: 100%;
			}

			.data-table {
				background-color: #fff;
			}

			table {
				width: 100%;
				border-collapse: collapse;
			}

			th {
				text-align: center;
				font-weight: bold;
				border: 1px solid gray;
			}

			td {
				font-weight: unset;
				text-align: center;
				border: 1px solid gray;
			}

			/*==================================================================
							[ 单元格宽度 ]*/
			.column1 {
				width: 20%;
			}

			.column2 {
				// width: 60%;
				width: auto;
			}

			.column3 {
				width: 40%;
			}

			// .column4 {
			//     width: 19%;
			// }

			// .column5 {
			//     width: 13%;
			// }
			/*---------------------------------------------*/

			.table-head th {
				padding-top: 10px;
				padding-bottom: 10px;
			}

			.table-body td {
				height: 46px;
			}

			/*==================================================================
							[ Fix header ]*/
			.data-table {
				position: relative;
				padding-top: 46px;
			}

			.table-head {
				position: absolute;
				width: 100%;
				top: 0;
				left: 0;
			}

			.table-body {
				max-height: 231px;
				overflow: auto;
				width: 100%;
			}

			/*==================================================================
							[ Ver1 ]*/

			.data-table.ver1 th {
				font-family: Lato-Bold;
				font-size: 18px;
				color: #333;
				background-color: #e5e5e5;
			}

			.data-table.ver1 td {
				font-family: Lato-Regular;
				font-size: 14px;
				color: #808080;
			}
		}
		.handle-box {
			margin-bottom: 20px;
		}

		.handle-select {
			/* width: 120px; */
			width: 185px;
		}

		.handle-input {
			width: 300px;
			display: inline-block;
		}
		.table {
			width: 100%;
			font-size: 14px;
		}
		.red {
			color: #ff0000;
		}
		.mr10 {
			margin-right: 10px;
		}
		.table-td-thumb {
			display: block;
			margin: auto;
			width: 40px;
			height: 40px;
		}
		.w {
			// width: 470px !important;
			width: 100% !important;
		}

		.upload-file {
			background: transparent;
			position: relative;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: 100%;
			grid-template-rows: 260px;
			align-items: center;
			align-content: flex-start;
			justify-items: center;
			grid-auto-flow: row;
			margin-bottom: 10px;
			.show-img {
				width: 250px;
				height: 250px;
				position: relative;
				border-radius: 15px;
				img {
					width: 100%;
					height: 100%;
					border-radius: 15px;
					box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3);
				}
				.after {
					position: absolute;
					right: -0.26rem;
					top: -0.26rem;
					font-size: 1.04rem;
					width: 1.04rem;
					height: 1.04rem;
					line-height: 1.04rem;
					text-align: center;
				}
			}
			.btn {
				border: 1px dashed #666;
				position: relative;
				left: 0;
				display: inline-block;
				text-align: center;
				color: #fff;
				text-decoration: none;
				width: 250px;
				height: 250px;
				border-radius: 15px;
				.add-btn {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					width: 30px;
					height: 30px;
					border-radius: 15px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				#file {
					opacity: 0;
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
					border-radius: 15px;
				}
			}
		}

		.upload-btn {
			// text-align: right;
			display: flex;
			flex-direction: row;
			justify-content: center;
			// padding-left: 110px;
			// margin-right: 120px;
			align-items: center;
			.img-size {
				// margin-right: 30px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: left;

				.tips-title {
					font-size: 14px;
					height: 16px;
					line-height: 16px;
					margin-bottom: 10px;
				}
				.size {
					height: 16px;
					line-height: 16px;
					margin-left: 2px;
					label {
						cursor: pointer;
						margin-right: 10px;
						input {
							cursor: pointer;
						}
					}
				}
			}
			.btn {
				position: relative;
				display: inline-block;
				text-align: center;
				color: #fff;
				text-decoration: none;
				width: 80px;
				height: 32px;
				line-height: 32px;
				background: #409eff;
				border-radius: 3px;
				font-size: 12px;
				vertical-align: middle;
				margin-left: 10px;
			}
			input[name='file'] {
				opacity: 0;
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
			}
		}

		.wrapper {
			display: grid;
			grid-template-columns: 45% 55%;
			justify-content: flex-start;
			justify-items: left;
			grid-auto-flow: row;
			align-items: flex-start;
			align-content: flex-start;
			padding-top: 10px;
			box-sizing: border-box;
			.wrapper-left {
				width: 90%;
			}
			.wrapper-right {
				width: 90%;
				transform: translate3d(0px, -5px, 0px);
				.el-form-item {
					&:first-of-type {
						.el-form-item__content {
							// display: flex;
							// flex-direction: row;
							// align-items: center;
						}
					}
				}
			}
			// .el-form-item {
			//     .el-form-item__content {
			//         margin-left: 0 !important;
			//         text-align: right;
			//     }
			// }
		}

		.el-breadcrumb__inner {
			cursor: pointer !important;
		}
	}
</style>
